<template>
	<view class="container">
		<view class="wrapper">
			<!-- logo -->
			<view class="titbox">
				<view class="firtit">
					<image v-if="info.logo != ''" :src="info.logo" style="width:75px;height:27px;margin-right: 5px;"></image>
				{{info.mobile_name}}
				</view>
				<!-- <view class="sectit">实现客户到出入库全流程管理</view> -->
			</view>
			<!-- 表单 -->
			<view class="login-box">	
				<view class="input-item">
					<view class="itemtit">账号</view>
					<view class="itembot">
						<image class="phoneimg" :src="BASE_IMG_URL+'/index/phone1.png'" ></image>
						<input 
							type="text" 
							placeholder="请输入账号" 
							placeholderStyle="color:#999;font-size:30rpx"
							class="inp"
							v-model="account"
						>	
					</view>
				</view>
				<view class="input-item">
					<view class="itemtit">密码</view>
					<view class="itembot">
						<image class="suoimg" :src="BASE_IMG_URL+'/index/suo1.png'" ></image>
						<input class="inp" v-model="password" v-if="!showPassword" type="text" password placeholder="请输入密码" placeholder-class="pl" />
						<input class="inp" v-model="password" v-if="showPassword" type="text" placeholder="请输入密码" placeholder-class="pl" />
						<image :src="BASE_IMG_URL+'/index/nosee1.png'" v-if="!showPassword" @click="showPassword = true" class="eayimg" ></image>
						<image :src="BASE_IMG_URL+'/index/see1.png'" v-if="showPassword" @click="showPassword = false" class="eayimg" ></image>
					</view>
				</view>
			</view>
			
			<view class="tipwarp">
				<view class="tipp" @click="rememberPass"><radio value="" color="#008EFF" style="transform: scale(0.7);" :checked="remember" />记住账号密码</view>
			</view>
			<view class="protocol or_txt">
				<checkbox-group @change='ChangeIsDefault'>
					<checkbox :class="inAnimation?'trembling':''" @animationend='inAnimation=false' style="transform:scale(0.7)"
						:checked="protocol ? true : false" />已阅读并同意 <text class="btn-txt"
						@click="skip('content')">《用户协议》</text>
					<text class="btn-txt" @click="skip('content2')">《隐私协议》</text>
				</checkbox-group>
			</view>
			<!-- 登录按钮 -->
			<view class="button" @tap="toLogin">登录</view>
			<view class="btn wx wxLogin" @click="wxLogin">
				<image class="wechatimg" :src="BASE_IMG_URL+'/index/wechat.png'" ></image>
				<!-- <span class="iconfont icon-s-weixindenglu1">微信登录</span> -->
			</view>
			<!-- <view class="freelogin" @click="freeLogin">暂不登录，进行演示</view> -->
		</view>
	</view>
</template>

<script>
	import { BASE_IMG_URL } from '@/api/http.js'
	import { a_login, defaultInfo, login_text, wxLogin } from '@/api/api'
	
	export default {
		data() {
			return {
				BASE_IMG_URL:BASE_IMG_URL,
				account:'',
				showPassword:false,
				password:'',
				info:{},
				remember:false,  //记住账号密码
				protocol:false,
				inAnimation: false,
			};
		},
		onShow() {
			this.account = uni.getStorageSync('commonAccount') ? uni.getStorageSync('commonAccount') : ''
			this.password = uni.getStorageSync('commonPass') ? uni.getStorageSync('commonPass') :''
			this.remember = uni.getStorageSync('commonRemember')
			//获取默认头部信息
			this.getDefInfo()
		},
		methods: {
			//记住账号 密码
			rememberPass() {
				this.remember = !this.remember
			},
			getDefInfo() {
				defaultInfo().then(res=>{
					this.info = res.data
					uni.setStorageSync('appid',res.data.appid)
				})
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			async wxLogin() {
			  if (!this.protocol) {
			  	this.inAnimation = true
			  	uni.showToast({
			  		title:'请先阅读并同意协议',
			  		icon:'none'
			  	})
			  	return
			  }
				// 获取微信登录凭证 code
				const res = await uni.login({
				  provider: 'weixin'
				});
				const code = res[1].code;
		
				// 获取用户信息
				const userInfoRes = await uni.getUserInfo({
				  provider: 'weixin'
				});
				this.userInfo = userInfoRes[1];
		
				// 将 code 发送到后端服务器，获取 token
				let params = {
					code:code,
					encryptedData:this.userInfo.encryptedData,
					iv:this.userInfo.iv,
				}	
				wxLogin(params).then(res=>{
					this.jumpPage(res)
				})
			},
			  
			
			toLogin() {
				if (!this.protocol) {
					this.inAnimation = true
					uni.showToast({
						title:'请先阅读并同意协议',
						icon:'none'
					})
					return
				}
				if(!this.account){
					uni.showToast({
						title:'请填写账号',
						icon:'none'
					})
					return
				}
				if(!this.password){
					uni.showToast({
						title:'请填写密码',
						icon:'none'
					})
					return
				}
				
				uni.login({
				      provider: 'weixin',
				      success: (loginRes) => {
				        if (loginRes.errMsg === 'login:ok') {
				          let code = loginRes.code;
			
				          // 获取用户信息
				          uni.getUserInfo({
				            provider: 'weixin',
				            success: (userInfoRes) => {
				              if (userInfoRes.errMsg === 'getUserInfo:ok') {
				                let userInfo = userInfoRes.userInfo;
				
				                let params = {
				                  account: this.account,
				                  password: this.password,
				                  code: code,
				                  encryptedData: userInfoRes.encryptedData,
				                  iv: userInfoRes.iv,
				                };
				
				                if (this.remember) {
				                  uni.setStorageSync('commonAccount', this.account);
				                  uni.setStorageSync('commonPass', this.password);
				                } else {
				                  uni.removeStorageSync('commonAccount');
				                  uni.removeStorageSync('commonPass');
				                }
				                uni.setStorageSync('commonRemember', this.remember);
				
				                a_login(params).then((res) => {
				                  this.jumpPage(res);
				                }).catch((err) => {
				                  uni.showToast({
				                    title: '登录失败: ' + err.message,
				                    icon: 'none'
				                  });
				                });
				              } else {
				                uni.showToast({
				                  title: '获取用户信息失败: ' + userInfoRes.errMsg,
				                  icon: 'none'
				                });
				              }
				            },
				            fail: (err) => {
				              uni.showToast({
				                title: '获取用户信息失败: ' + err.errMsg,
				                icon: 'none'
				              });
				            }
				          });
				        } else {
				          uni.showToast({
				            title: '获取微信登录凭证失败: ' + loginRes.errMsg,
				            icon: 'none'
				          });
				        }
				      },
				      fail: (err) => {
				        uni.showToast({
				          title: '获取微信登录凭证失败: ' + err.errMsg,
				          icon: 'none'
				        });
				      }
				    });
				// let params = {
				// 	account:this.account,
				// 	password:this.password,
				// 	code:code
				// }	
				// if(this.remember){
				// 	uni.setStorageSync('commonAccount',this.account)
				// 	uni.setStorageSync('commonPass',this.password)
				// }else{
				// 	uni.removeStorageSync('commonAccount')
				// 	uni.removeStorageSync('commonPass')
				// }
				// uni.setStorageSync('commonRemember',this.remember)
				// console.log(params)
				// a_login(params).then(res=>{
				// 	this.jumpPage(res)
				// })
				
			},
			jumpPage(res) {
				uni.setStorageSync('userinfo',res.data.userinfo)
				uni.setStorageSync('token',res.data.userinfo.token)
				uni.redirectTo({
					url:'/pages/index/index'
				})
			},
			//暂不登录
			freeLogin() {
				login_text().then(res=>{
					this.jumpPage(res)
				})
			},
			//页面切换
			skip(path) {
				if (path == 'content') {
					uni.navigateTo({
						url: '/pages/login/content?type=2'
					})
				} else if (path == 'content2') {
					uni.navigateTo({
						url: '/pages/login/content?type=3'
					})
				}
				
			},
			ChangeIsDefault(e) {
				this.$set(this, 'protocol', !this.protocol);
			},
		}
	};
</script>

<style lang="scss">
	.freelogin{
		text-align: center;
		font-size:24rpx;
		color:red;
		margin-top:50px;
	}
	.tipwarp{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin:20rpx auto 30rpx;
		width:630rpx;
		.tipp{
			font-size:24rpx;
			color:$uni-text-color;
		}
	}
	.wrapper {
		position: absolute;
		z-index: 90;
		padding-bottom: 40upx;
		width: 100%;
		.titbox{
			padding:90rpx 0 100rpx;
			.firtit{
				font-size:48rpx;
				color:$uni-text-color;
				font-weight: bold;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.sectit{
				font-size:32rpx;
				color:#999999;
				margin-top:30rpx;
				text-align: center;
			}
		}
		// 输入
		.login-box {
			margin:0 auto;
			.input-item {
				padding:26rpx 30rpx;
				border-bottom: 1rpx solid #c7c7c7;
				width: 630rpx;
				margin:0 auto 50rpx;
				&:last-child{
					margin:0 auto 0;
				}
				.itemtit{
					font-size:30rpx;
					color:#666666;
					margin-bottom:40rpx;
				}
				.itembot{
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
				.phoneimg{
					width:41rpx;
					height:40rpx;
				}
				.suoimg{
					width:40rpx;
					height:44rpx;
				}	
				.inp {
					width:460rpx;
					margin-left:30rpx;
					font-size: 28rpx;
				}
				.pl {
					font-size:30rpx;
					color: #999999;
				}
				.eayimg{
					margin-left:30rpx;
					width:33rpx;
					height:33rpx;
				}
			}
		}
		.li_box{
			margin:40rpx auto 0;
			width:690rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding:0 30rpx;
			font-weight: 700;
			.register{
				font-size:26rpx;
				color:#333333;
			}
			.forgot{
				font-size:26rpx;
				color:#333333;
			}
		}
		// 登录
		.wxLogin{
			width: 100rpx;
			margin: 0 auto;
			.wechatimg{
				margin: 40rpx auto 0;
				width:100rpx;
				height:85rpx;
			}
		}
		.or_txt {
			text-align: center;
			margin-top: 24rpx;
			color: #999999;
			font-size: 25rpx;
			line-height: 1.5;
		}
		.btn-txt {
			color: #017FCC;
		}
		
		
	}
</style>
